<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="librarian/common :: head"></th:block>
<body>
  <div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->


      <div th:replace="librarian/common :: navbar"></div>


    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->

          <th:block th:replace="librarian/common :: sidebar"></th:block>

          <div class="content-wrapper">
          <div id="lendandreturn">
                    <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">Lend Book And Return</h2>
            </div>
          </header>

<!-- <ul class="nav">
            <li class="nav-item">
<ul class="navbar-expand">
        <li><a onclick="borrowBook()" data-toggle=tab">Borrow Book</a></li>
        <li><a onclick="returnBook()" data-toggle=tab">Return Book</a></li>

      </ul>
    </li>
  </ul> -->


       <!--    <button  id="borrow" onclick="borrowBook()" class="btn.active.focus">borrow book</button>
          <button  id="return" onclick="returnBook()" class="btn btn-success mr-2">return book</button> -->
          
        </div>
        <div id="tablelar" class="col-12 grid-margin">
         <div class="card"  id="borrowBody">
          <div class="card-body">
            <h4 class="card-tltle">Borrow book by BookId and ReaderId.</h4>
            <div class="container-fluid">
              <div class="row" id="addForm">
              <div class="col-4">
              <div class="form-group row">
                <label for="exampleInputtext2" class="col-sm-3 col-form-label">BookId</label>
                
                <input type="text" class="form-control" id="bookid1" placeholder="Enter the BookId">
          
              </div>
            </div>
             <div class="col-4">
              <div class="form-group row">
                <label for="exampleInputtext2" class="col-sm-3 col-form-label">BookId</label>
                
                <input type="text" class="form-control" id="bookid2" placeholder="Enter the BookId">
            
             
              </div>
            </div>
             <div class="col-4">
              <div class="form-group row">
                <label for="exampleInputtext2" class="col-sm-3 col-form-label">BookId</label>
                
                <input type="text" class="form-control" id="bookid3" placeholder="Enter the BookId">
            
             
              </div>
            </div>
          </div>
          <div class="row">
            <label for="exampleInputtext2" class="col-sm-3 col-form-label">ReaderId</label>
              <input type="text" class="form-control" id="readerid" placeholder="Enter the ReaderId">
               
              <button onclick="submitBorrow()" class="btn btn-primary">submit</button>
          </div>

            </div>
          </div>
        </div>
      </div>
              <div id="tablelar" class="col-12 grid-margin">
         <div class="card">
          <div class="card-body">
            <h4 class="card-tltle">Return book by BookId and ReaderId.</h4>
            <div class="container-fluid">
              <div class="form-group row">
                <label for="exampleInputtext2" class="col-sm-3 col-form-label">BookId</label>
                
                <input type="text" class="form-control" id="bookidR" placeholder="Enter the BookId">
            
             
              <!-- label for="exampleInputtext2" class="col-sm-3 col-form-label">ReaderId</label>
              <input type="text" class="form-control" id="readeridR" placeholder="Enter the ReaderId" -->
               
              <button onclick="submitReturn()" class="btn btn-primary">submit</button>
              </div>
            </div>
          </div>
        </div>
      </div>
        </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->



        <div th:replace="librarian/common :: footer"></div>

        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

  <!-- plugins:js -->


  <div th:replace="librarian/common :: scripts"></div>


    <script>
    
      function submitBorrow(){
          let sum = 0;

          for (let i=1; i<=3; i++){
              // TODO: make sure why 'var' can not be used
              const bookId = $('#bookid'+i).val();
              if (bookId==="") continue;

              const formData = new FormData();
              formData.append("targetReaderId", $('#readerid').val());

              $.ajax({
                  url: "/api/book/borrow/"+bookId,
                  type: "POST",
                  data: formData,
                  dataType: "json",
                  processData: false,
                  contentType: false,
                  success: function (resp){
                      $("#bookid"+i).val("");
                      sum++;
                      console.log(sum);
                  },
                  error: function (resp) {
                      alertError(resp.responseJSON.message+" ( BookID: "+bookId+" )");
                  }
              });
          }

          setTimeout(function () {
              alertSuccess("you have borrowed "+sum+" book(s).");
          }, 400);
      }
             

            function submitReturn(){
              $.ajax({
                url: "/api/book/return/"+$('#bookidR').val(),
                type: "POST",
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (resp){
                    alertSuccess("the book has returned.");
                    $("#bookidR").val("");
                    // $("#readeridR").val("");
                },
                error: function (resp) {
                    alertError(resp.responseJSON.message);
                }
            });
      }
    </script>


</body>

</html>
